Herencia de propiedades de estilo.
El conjunto de marcas HTML forman en sí un árbol.
Herencia de propiedades de estilo.
En muchas situaciones podemos redefinir propiedades para marcas contenidas.
< style type="text/css">
body {
color:#0000ff;
font-family:verdana;
}
em {
color:#008800;
}
p {
color:#999999;
}
< /style>
Definición de un estilo en función del contexto.
Definición de un estilo para una marca HTML siempre y cuando la misma esté contenida por otra marca determinada.
Supongamos que queremos que cuando disponemos un texto encerrado por la marca b (bold) dentro de un párrafo el color de la misma sea verde. Pero si la marca b está contenida por la marca h1 el color debe ser rojo:
Continúa ejemplo ->
Definición de un estilo en función del contexto.
< html>
< head>
< title>Problema< /title>
< style type="text/css">
p b{
color:#0000ff;
}
h1 b{
color:#ff0000;
}
< /style>
< /head>
< body>
< h1>Acá tenemos un título de nivel uno, luego un bloque con
la marca bold debe aparecer < b>así< /b>< /h1>
< p>
Luego si escribimos un párrafo y encerramos un bloque con la marca bold
debe aparecer < b>así< /b>
< /p>
< /body>
< /html>
Definición de hojas de estilo en un archivo externo.
La metodología más empleada es la definición de una hoja de estilo en un archivo separado que deberá tener la extensión css.
Definición de estilos por medio de clases.
En muchas situaciones una regla de estilo puede ser igual para un conjunto de marcas HTML.
En esos casos conviene plantear una regla de estilo con un nombre genérico que posteriormente se puede aplicar a varias marcas de HTML.
Para declarar la clase primero inicializamos con el carácter punto y seguidamente le damos un nombre.
Tarea 2
Problema 1:
Crear una página web que contenga una cabecera de nivel 1 (h1), luego una cabecera de nivel 2 (h2) y un párrafo.
Definir reglas de estilo para las tres marcas h1,h2 y p.
Inicializar propiedades vistas en conceptos anteriores.
Intentar el planteo de una página que muestre el contenido de la forma más clara posible.
Tarea 2 (2)
Problema 2:
Definir en la hoja de estilo estas dos clases:
.subrayado {
color:#00aa00;
text-decoration:underline;
}
.tachado {
color:#00aa00;
text-decoration:line-through;
}
Luego, en la página html,
Definir un título con nivel h1 (subrayar todo el título).
Luego un párrafo que tenga algunas palabras subrayadas y otras tachadas (utilizar la marca span para asignar estilos a una palabra).
Tarea 2 (3)
Problema 3:
Definir estas dos reglas en la hoja de estilo externa.
.pregunta {
font-family:verdana;
font-size:14px;
font-style:italic;
color:#0000aa;
}
.respuesta {
font-family:verdana;
font-size:12px;
font-style:normal;
text-align:justify;
color:#555555;
}
Luego crear una página HTML que contenga 3 preguntas y 3 respuestas.
A cada pregunta y respuesta disponerla en un párrafo distinto.
Asignar los estilos .pregunta y .respueta
Definición de estilos por medio de clases.
Definición de estilos por medio de Id.
La diferencia fundamental en la definición de un estilo por medio de Id con respecto a la de clase, es que sólo podremos aplicar dicho estilo a una sola marca dentro de la página HTML.
La sintaxis para definir un estilo por medio de Id es:
#cabecera {
font-family:Times New Roman;
font-size:30px;
text-align:center;
color:#0000ff;
background-color:#bbbbbb;
}
Luego, sólo una marca HTML dentro de una página puede definir un estilo de este tipo:
< div id="cabecera">
Definición de estilos por medio de Id.
Ejemplo completo
< html>
< head>
< title>Problema< /title>
< link rel="StyleSheet" href="estilos.css" type="text/css">
< /head>
< body>
< div id="cabecera">
< h1>Título de la cabecera< /h1>
< /div>
< /body>
< /html>
Propiedades relacionadas al borde de una marca HTML.
Debemos ahora hacernos la idea que todo elemento que se crea dentro de una página HTML genera una caja.
Imaginemos los controles que hemos creado h1,h2,h3,p,em, etc.; si fijamos la propiedad background-color veremos que el contenido se encuentra dentro de un rectángulo.?
Podemos acceder a las propiedades del borde de ese rectángulo mediante las CSS; las propiedades más importantes a las que tenemos acceso son:
border-width
border-style
border-color
Propiedades relacionadas al borde de una marca HTML.
Disponemos de los siguientes estilos de borde (border-style):
none
hidden
dotted
dashed
solid
double
groove
ridge
Inset
outset Continúa ejemplo ->
Propiedades relacionadas al borde de una marca HTML.
El selector universal *
Sirve para inicializar las propiedades de todas las marcas HTML.
* {
color:#0000aa;
margin:0px;
padding:0px;
}
Esto significa que todas las marcas se imprimen de color verde con cero pixel de margin y padding, salvo que otra regla lo cambie.
Imaginemos si definimos h1 { color:#ff0000} significa que tiene prioridad esta regla.
El selector universal *
En realidad, en forma tácita lo hemos estado utilizando, cuando definimos una clase sin indicar el tipo de marca HTML donde actuará.
.pregunta {…}
Equivalente a:
*.pregunta {…}
Es decir que podemos asignar esta regla a cualquier marca HTML.
p.pregunta {…} //Indica que esta regla sólo se puede utilizar en las marcas de párrafo.
Pseudoclases
Las pseudoclases son unas clases especiales, que se refieren a algunos estados especiales del elemento HTML.
Las que se utilizan fundamentalmente son las que se aplican a la marca < a> (ancla).
La sintaxis :
a:pseudoclase {
propiedad: valor;
}
Pseudoclases
Para la marca HTML < a> tenemos 4 pseudoclases fundamentales:
link – Enlace sin ingresar
visited – Enlace presionado.
hover – Enlace que tiene la flecha del mouse encima,.
active – Es la que tiene foco en ese momento (pruebe de tocar la tecla tab).
Es importante hacer notar que el orden en que definimos las pseudoclases es fundamental para su funcionamiento
-> debe respetarse el orden: link-visited-hover-active
Pseudoclases
Eliminar el subrayado a un enlace por medio de las pseudoclases
Otra actividad común en algunos sitios es eliminar el subrayado a los enlaces.
La hoja de estilo es:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
Tener en cuenta que podemos agrupar la regla de esta forma:
a:link, a:visited {
text-decoration: none;
}
Propiedades relacionadas a la dimensión de un objeto en la página.
Disponemos de dos propiedades fundamentales que nos permiten fijar el ancho y el alto de una marca HTML.
Creación de un menú vertical configurando las pseudoclases.
Un recurso muy útil es disponer un menú en una página, si no requerimos uno muy elaborado podemos resolverlo utilizando sólo CSS y HTML
Tarea 3:
Basado en los principios de pseudoclases, implementa:
Un menú vertical
Un menú horizontal
 Página anterior | Volver al principio del trabajo | Página siguiente  |